<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="15">
        <el-card class="line-pic">
          <div><div ref="table" class="table"></div></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <div class="one-col">
          <div class="show-cards">
            <mCard title="订单总数" number="100"></mCard>
            <mCard title="业主用户总数" number="10000"></mCard>
          </div>
          <div class="show-cards">
            <mCard title="企业用户总数" number="80000"></mCard>
            <mCard title="平台日均活跃" number="8933"></mCard>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-tabs type="border-card">
      <el-tab-pane label="商家注册审批"><register></register></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import tabShopRegister from "@/components/tab-shop-register";
import show_some_card from "@/components/show_some_card";
import * as echarts from "echarts";
export default {
  components: {
    mCard: show_some_card,
    register: tabShopRegister,
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.table);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "平台日活量",
      },
      xAxis: {
        type: "category",
        data: [
          "2021/9/7",
          "2021/9/8",
          "2021/9/9",
          "2021/9/10",
          "2021/9/11",
          "2021/9/12",
          "2021/9/13",
          "2021/9/14",
          "2021/9/15",
          "2021/9/16",
          "2021/9/17",
          "2021/9/18",
          "2021/9/19",
          "2021/9/20",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [
            820,
            932,
            901,
            934,
            1290,
            1330,
            1320,
            820,
            932,
            901,
            934,
            1290,
            1330,
            1320,
          ],
          type: "bar",//图表的类型，一般常用是line（线性），柱形（bar）
          smooth: true,
        },
      ],
    });
  },
};
</script>

<style scoped>
.line-pic {
}
.table {
  min-height: 200px;
  height: 40vh;
  width: 100%;
}
.show-cards {
  display: flex;
  flex-direction: column;
}
.one-col {
  display: flex;
  flex-direction: row;
}
.el-tabs {
  margin-top: 2rem;
}
</style>